<template>
  <div>
    <div class="mine">
      <!-- 姓名区域 -->
      <!-- 头像资料区域 -->
      <div class="profile">
        <van-image round class="avatar" fit="cover" :src="info.photo" />
        <div class="info">
          <h4>{{ info.name }}</h4>
          <span>{{ info.birthday }}</span>
        </div>
      </div>

      <!-- 快捷功能 -->
      <!-- ○  放栅格布局，每个格子里放 van-icon 和 span （记得先注册van-row、van-col和van-icon） 
      ○  van-col里用弹性布局，修改主轴方向为一上一下，然后改字体和文字颜色  -->
      <van-row>
        <van-col span="8">
          <van-icon name="newspaper-o" />
          <span>我的作品</span>
        </van-col>

        <van-col span="8">
          <van-icon class="two-icon" name="star-o" />
          <span>我的视频</span>
        </van-col>

        <van-col span="8">
          <van-icon class="three-icon" name="tosend" />
          <span @click="nvzhu">我的女主</span>
        </van-col>
      </van-row>

      <!-- 功能列表 -->
      <van-cell-group>
        <van-cell to="/mine/edit" title="编辑冠希" icon="edit" is-link />
        <van-cell to="/mine/chat" title="跟冠希聊天" icon="good-job-o" is-link />
        <van-cell title="设置冠希" icon="hot-o" is-link />
        <van-cell icon="info-o" @click="logout" title="退出登录" is-link />
      </van-cell-group>
    </div>
  </div>
</template>

<script>

import { userInfoAPI } from "@/api";
// import {userInfoAPI} from '@/api'

export default {
  data() {
    return {
      // info: {},
    };
  },

  methods: {
    logout() {
      // 要删除token（删除vuex里的token和本地存储的token）
      // 打回登录页
      this.$store.commit("logout");
    },
    nvzhu(){
      
    }
  },

  created() {
    this.$store.dispatch("reqUserInfo");
  },

  computed: {
    // 相当于就是给state里的userInfo起了一个别名叫info
    info() {
      return this.$store.state.userInfo;
    },
  },
};
</script>

<style lang="less" scoped>
// 姓名区域  样式代码
//全局span的文字大小
span {
  font-size: 18px !important;
}

.profile {
  height: 140px;
  background-color: #3296fa;
  // 为了让头像和资料一左一右排列
  display: flex;
  // 垂直居中
  align-items: center;

  .avatar {
    width: 90px;
    height: 90px;
    // 左间距和右间距
    margin-left: 20px;
    margin-right: 10px;
  }

  .info {
    h4 {
      color: #fff;
      font-size: 18px;
      margin-bottom: 10px;
    }

    span {
      background-color: #fff;
      color: #3296fa;
      padding: 2px 4px;
    }
  }
}

// 栅格区域样式代码  快捷功能
.van-col {
  height: 90px;
  display: flex;
  // 设置一上一下排列
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .van-icon {
    font-size: 36px;
    color: #8daaff;
    margin-bottom: 5px;

    &.two-icon {
      color: red;
    }

    &.three-icon {
      color: #ffaf6b;
    }
  }

  // 不是代表找第二个，是代表找在父元素里是第二个子元素的van-icon
  // .van-icon:nth-child(2) {
}

//
</style>